<template>
  <el-dialog class="namInfo" v-model="formVisible" :title="title" center draggable width="500">
    <el-form ref="refNamForm" :model="partyName"  :rules="verifyRules" label-width="80px">
      <div class="namForm">
        <el-form-item prop="name" label="名称">
          <el-input v-model="partyName.name" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item prop="departmentId" label="部门">
          <el-tree-select v-model="partyName.departmentId"
                          :data="deptTree"
                          :props="defaultProps"
                          check-strictly
                          :render-after-expand="false"
                          placeholder="请选择部门" style="width: 100%" />
        </el-form-item>
        <el-form-item prop="code" label="排序">
          <el-input-number v-model="partyName.code" :min="0" :max="1000" style="width: 100%"/>
        </el-form-item>
      </div>
      <el-button :loading="loading" type="primary" style="width:100%;margin-top:20px;"
                 @click.prevent="handleAdd(refNamForm)">{{formOperate === 'add' ? '提 交' : '更 新'}}</el-button>
    </el-form>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "NameInfo"
}
</script>

<script setup lang="ts">
import {onMounted, PropType, reactive, ref, watch} from "vue";
import {IPartyName} from "@/iwb/IParty";
import {FormInstance, FormRules} from "element-plus";
import {addPartyName, updatePartyName} from "@/api/party";
import {getDepartment} from "@/api/config";
import {IDept} from "@/iwb/IConfig";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  operate: {
    type: String,
    default: 'add'
  },
  data: Object as PropType<IPartyName>
});
const loading = ref(false);
const formVisible = ref(false);
const title = ref('当组织基本信息');
const partyName = ref({} as IPartyName);
const refNamForm = ref<FormInstance>();
const formOperate = ref('add');

const verifyRules = reactive<FormRules>({
  name: [{required: true, trigger: 'blur', message: '党组织名称不能为空'}],
})

partyName.value.code = 0;

const handleAdd = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  loading.value = true;
  formEl.validate((valid: boolean, fields) => {
    if (formOperate.value === 'add') {
      addPartyName(partyName.value).then(()=> {
        formVisible.value = false;
        loading.value = false;
        emit('reload:data');
      }).catch(error => {
        loading.value = false;
        console.error(error);
      })
    } else {
      updatePartyName(partyName.value).then(()=> {
        formVisible.value = false;
        loading.value = false;
        emit('reload:data');
      }).catch(error => {
        loading.value = false;
        console.error(error);
      })
    }
  }).catch(erro => {
    console.error(erro);
    loading.value = false;
  });
}

const defaultProps = ref({
  children: 'children',
  label: 'name',
  value: 'id'
})
const deptTree = ref([] as Array<IDept>);

const reloadDeptTree = () => {
  loading.value = true;
  getDepartment().then(res => {
    deptTree.value = res.data;
    loading.value = false;
  }).catch(error => {
    console.error(error);
    loading.value = false;
  })
}

onMounted(() => {
  reloadDeptTree();
})

const emit = defineEmits(['update:visible', 'reload:data']);

watch(
    () => formVisible.value,
    (val) => {
      emit('update:visible', val);
    },
);

watch(
    () => props.visible,
    (val) => {
      formVisible.value = val;
    },
);

watch(
    () => props.operate,
    (val) => {
      formOperate.value = val;
    },
);

watch(
    () => props.data,
    (val) => {
      if (val) {
        partyName.value = val;
      }
    },
);

</script>

<style scoped lang="scss">
.namInfo {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.namForm {
  margin: 10px;

  :deep(.namForm) {
    .el-select {
      width: 100%;
    }
  }
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>